<template>
  <v-data-table :disable-sort="true"
                :headers="headers"
                :hide-default-footer='true'
                :items="desserts"
                :items-per-page="1000"
                class="table form-table"
                expand-icon="mdi-file-upload"
                item-key="travelAllowanceDetailId"
                show-expand>
    <template v-slot:header.add="{ header }">
      <img @click="AddNewLine"
           alt=""
           src="../../assets/images/form-Add-btn.svg"
           title=""/>
    </template>
    <template v-slot:item.add="{ item }">
      <!--      <img @click="DeleteLine(item)"-->
      <!--           alt=""-->
      <!--           class="cursor"-->
      <!--           src="../../assets/images/form-minus-btn.svg"-->
      <!--           title=""/>-->
      <v-btn :class="{'delete-btn':isActive}"
             @click="DeleteLine(item)"
             depressed></v-btn>
    </template>
    <template v-slot:item.territory="props">
      <div @click="changeEdit(props)"
           style="cursor:pointer;height: 38%"
           v-if="!props.item.territoryEdit">
        <span>{{props.item.territory}}</span>
      </div>
      <v-select :color="props.item.territoryerrorColor"
                :hint="props.item.territoryhinttext"
                :items="territoryList"
                autofocus="autofocus"
                class="territory"
                dense
                item-text="Name"
                item-value="Id"
                v-else
                v-model="props.item.territory"
                v-on-clickaway="away"></v-select>
    </template>
    <template v-slot:item.province="props">
      <div style="height: 38%"
           v-if="!props.item.readonlyProvince">N/A
      </div>
      <div @click="changeEdit(props)"
           style="cursor:pointer;height: 38%"
           v-if="!props.item.provinceEdit">
        <span>{{props.item.province}}</span>
      </div>
      <v-select
        :color="props.item.provinceerrorColor"
        :hint="props.item.provincehinttext"
        :items="provinceList"
        dense
        item-text="Name"
        item-value="Id"
        v-else
        v-model="props.item.province"
        v-on-clickaway="away"></v-select>
    </template>
    <template v-slot:item.accomodationCity="props">
      <div @click="changeEdit(props)"
           style="cursor:pointer;height: 38%"
           v-if="!props.item.cityEdit">
        <span>{{props.item.accomodationCity}}</span>
      </div>
      <v-select :color="props.item.accomodationCityerrorColor"
                :hint="props.item.accomodationCityhinttext"
                :items="cityList"
                dense
                item-text="Name"
                item-value="Id"
                v-else
                v-model="props.item.accomodationCity"
                v-on-clickaway="away"></v-select>
    </template>
    <template v-slot:item.hotelName="props">
      <div @click="changeEdit(props)"
           style="cursor:pointer;height: 38%"
           v-if="!props.item.hotelNameEdit">
        <span>{{props.item.hotelName}}</span>
      </div>
      <v-text-field :color="props.item.hotelerrorColor"
                    :hint="props.item.hotelhinttext"
                    :rules="Rules.hotelName"
                    autofocus="autofocus"
                    hide-details="auto"
                    v-else
                    v-model="props.item.hotelName"
                    v-on-clickaway="away"></v-text-field>
    </template>

    <template v-slot:item.checkInDate="props">
      <div @click="changeEdit(props)"
           style="cursor:pointer;height: 38%"
           v-if="!props.item.checkInDateEdit">
        <span>{{props.item.checkInDate}}</span>
      </div>
      <v-menu :close-on-content-click="false"
              :return-value.sync="props.item.checkInDate"
              min-width="290px"
              offset-y
              ref="dateMenu"
              transition="scale-transition"
              v-else
              v-model="dateMenu"
      >
        <template v-slot:activator="{ on, attrs }">
          <v-text-field :color="props.item.checkInDateerrorColor"
                        :hint="props.item.checkInDatelhinttext"
                        autofocus="autofocus"
                        readonly
                        v-bind="attrs"
                        v-model="props.item.checkInDate"
                        v-on="on"></v-text-field>
        </template>
        <v-date-picker :allowed-dates="checkInDates"
                       autofocus="autofocus"
                       no-title
                       scrollable
                       v-model="props.item.checkInDate"
                       v-on-clickaway="away">
        </v-date-picker>
      </v-menu>
    </template>
    <template v-slot:item.checkOutDate="props">
      <div @click="changeEdit(props)"
           style="cursor:pointer;height: 38%"
           v-if="!props.item.checkOutDateEdit">
        <span>{{props.item.checkOutDate}}</span>
      </div>
      <v-menu :close-on-content-click="false"
              :return-value.sync="props.item.checkOutDate"
              min-width="290px"
              offset-y
              ref="dateMenuOut"
              transition="scale-transition"
              v-else
              v-model="dateMenuOut"
      >
        <template v-slot:activator="{ on, attrs }">
          <v-text-field :color="props.item.checkOutDateerrorColor"
                        :hint="props.item.checkOutDatelhinttext"
                        readonly
                        v-bind="attrs"
                        v-model="props.item.checkOutDate"
                        v-on="on"></v-text-field>
        </template>
        <v-date-picker :allowed-dates="checkOutDates"
                       no-title
                       scrollable
                       v-model="props.item.checkOutDate"
                       v-on-clickaway="away">
        </v-date-picker>
      </v-menu>
    </template>

    <template v-slot:expanded-item="{ headers, item }">
      <td :colspan="headers.length" class="tdupload">
        <v-row>
          <v-col cols="12"
                 sm="12">
            <div class="attachment-btns">

              <v-btn :class="{'SelectFiles':isActive}"
                     @click="inputFile"
                     depressed><input @change="file(item)"
                                      multiple
                                      ref="uploadFile"
                                      style="display:none"
                                      type="file">Select files
                <div>

                </div>

              </v-btn>
              <v-btn @click="Updoad"
                     depressed>Upload
              </v-btn>
              <v-dialog v-model="dialog"
                        width="48%">
                <template v-slot:activator="{ on, attrs }">
                  <v-btn depressed
                         v-bind="attrs"
                         v-on="on">My photo album
                  </v-btn>
                </template>
                <v-card>
                  <v-card-title class="headline grey lighten-5">
                    My Photo Album
                  </v-card-title>

                  <v-card-text>
                    <div class="receipts-selected-group">
                      <div class="receipts-selected">
                        <img alt=""
                             src="../../assets/images/receipts/c321829a-9038-4a18-8b40-94a71cacd829.jpg">
                        <div class="check-image">
                          <v-checkbox v-model="checkbox"></v-checkbox>
                          <p>c321829a-9038-4a18-8b40-94a71cacd829.jpg</p>
                        </div>
                      </div>
                      <div class="receipts-selected">
                        <img alt=""
                             src="../../assets/images/receipts/e5e0a877-ff46-448e-a589-4ef5a7ec862e.png">
                        <div class="check-image">
                          <v-checkbox v-model="checkbox"></v-checkbox>
                          <p>2.png</p>
                        </div>
                      </div>
                    </div>
                  </v-card-text>
                  <div class="btn-pagination">
                    <v-btn @click="dialog = false"
                           color="primary"
                           text>
                      Selected all
                    </v-btn>
                    <v-pagination :length="3"
                                  v-model="page"></v-pagination>
                  </div>
                  <v-divider></v-divider>

                  <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn @click="dialog = false"
                           color="primary"
                           text>
                      Attach
                    </v-btn>
                    <v-btn @click="dialog = false"
                           color="primary"
                           text>
                      Delete
                    </v-btn>
                    <v-btn :class="{'image-close-btn':isActive}"
                           @click="dialog = false"
                           color="primary"
                           text>
                      Close
                    </v-btn>
                  </v-card-actions>
                </v-card>
              </v-dialog>
              <v-dialog v-model="selectFileDialog"
                        width="48%">
                <v-card>
                  <v-card-title class="headline grey lighten-5">
                    Select file type
                  </v-card-title>
                  <v-card-text>

                  </v-card-text>

                </v-card>
              </v-dialog>
            </div>

          </v-col>
          <div>
            <v-chip :key="attachment.uploadFileID"
                    @click:close="deleteFile(attachment)"
                    class="ma-2"
                    close
                    color="red"
                    text-color="white"
                    v-for="attachment in item.attachmentList">
              {{attachment.fileName}}
            </v-chip>

          </div>
        </v-row>
        <v-row>
          <v-dialog max-width="290"
                    persistent
                    v-model="UploadDialog">
            <v-card-actions>
              <v-radio-group column
                             v-model="attachmentType">
                <v-radio label="Hotel Receipt"
                         value="HotelReceipt"></v-radio>
                <v-radio label="Tickets or Boarding Pass"
                         value="Tickets"></v-radio>
                <v-textarea name="input-7-4"
                            outlined
                            v-if="attachmentType == 'Tickets'"
                            v-model="TicketsRemarks"></v-textarea>
              </v-radio-group>
            </v-card-actions>
            <v-card>
              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn @click="SelectAttachmentType(item)"
                       color="green darken-1"
                       text>
                  Select
                </v-btn>
                <v-btn @click="CloseAttachmentType"
                       color="green darken-1"
                       text>
                  Closed
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>
        </v-row>
        <v-row>
          <v-col cols="12"
                 md="12"
                 sm="12">
            <h3 style="float: left;">Hotel Receipt</h3>
          </v-col>
          <v-col :key="fileItem.uploadFileID"
                 cols="12"
                 md="1"
                 v-for="fileItem in item.hotelList">
            <v-card class="mx-auto"
                    max-width="344">
              <v-card-text>
                <viewer :images="item.hotelList">
                  <img :src="'data:image/jpeg;base64,'+fileItem.fileByte"
                       style="width:100px;height: 79px;">
                  <p>{{fileItem.fileName}}</p>

                </viewer>
              </v-card-text>
              <v-card-actions>
                <v-btn :class="{'delete-btn':isActive}"
                       @click="deleteFileOnDb(fileItem)"
                       depressed></v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
          <v-col cols="12"
                 md="12"
                 sm="12">
            <h3 style="float: left;">Tickets or Boarding Pass</h3>
          </v-col>
          <v-col :key="fileItem.uploadFileID"
                 cols="12"
                 md="1"
                 v-for="fileItem in item.ticketsList">
            <v-card class="mx-auto"
                    max-width="344">
              <v-card-text>
                <viewer :images="item.ticketsList">
                  <img :src="'data:image/jpeg;base64,'+fileItem.fileByte"
                       style="width:100px;height: 79px;">
                  <p>{{fileItem.fileName}}</p>

                </viewer>
              </v-card-text>
              <v-card-actions>
                <v-btn :class="{'delete-btn':isActive}"
                       @click="deleteFileOnDb(fileItem)"
                       depressed></v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
          <v-col cols="12"
                 md="12">
            <h3 style="float: left;">Remarks</h3>
          </v-col>
          <v-col cols="12"
                 md="12"
                 style="padding: 0px 12px 12px 12px;">
            <span style="float: left;">{{item.remarks}}</span>

          </v-col>
        </v-row>
      </td>
    </template>
  </v-data-table>
</template>

<script lang="ts">
  import {Component, Emit, Vue} from "vue-property-decorator";
  import {
    DeleteTravelAllowanceDetail,
    DeleteUploadFileODB,
    GetCityDailyAllowanceByTerritory,
    GetTerritoryList,
    GetTraveAllowanceDetail,
    PutTravelAllowanceDetail,
    SaveTravelAllowanceDetail,
    SaveUploadFile,
    UploadFile,
  } from "@/request/index";
  import {travelallowanceDetailHeard, travelallowanceDetailSelect, travelallowanceDetailValue,} from "@/pagetypes";

  @Component({
    components: {},
  })
  export default class APP extends Vue {
    territoryList: travelallowanceDetailSelect[] = [];
    provinceList: travelallowanceDetailSelect[] = [];
    cityList: travelallowanceDetailSelect[] = [];
    headers: travelallowanceDetailHeard[] = [
      {text: "", value: "add", class: "cursor"},
      {text: "Line No.", value: "lineNo"},
      {text: "Territory", value: "territory"},
      {text: "Province", value: "province"},
      {text: "Accomodation city", value: "accomodationCity"},
      {text: "Hotel Name", value: "hotelName"},
      {text: "Check-in date (DD/MM/YYYY)", value: "checkInDate"},
      {text: "Check-out date (DD/MM/YYYY)", value: "checkOutDate"},
      {text: "No. of nights", value: "noOfNights"},
      {text: "Daily travel allowance amount (RMB)", value: "dailyAmount"},
      {text: "Total travel allowance amount (RMB)", value: "totalAmount"},
      {text: "", value: "data-table-expand"},
    ];
    errorColor: string = "red darken-3";
    hinttext: string = "sdfsdf";
    Rules: any = {
      hotelName: [(val: string) => (val || '').length > 0 || 'This field is required']
      // (value: string) => !!value || 'Required.',
    }

    desserts: travelallowanceDetailValue[] = [];
    currentClickMode: any = {};
    lastClickMode: any = null;
    UploadDialog: boolean = false;
    attachmentType: string = "";
    attachmentList: any = [];
    dateMenuOut: boolean = false;
    dateMenu: boolean = false;
    isActive: boolean = true;
    selectFileDialog: boolean = false;
    page: number = 1;
    dialog: boolean = false;
    checkbox: boolean = true;
    TicketsRemarks: string = "";
    submitMode: any = {};


    @Emit("eventTravelallowance")
    eventTravelallowance(eventTravelallowance: any) {
    }

    async mounted() {
      var res = await GetTraveAllowanceDetail(this.$route.params.id);
      if (res.data) {
        this.eventTravelallowance(res.data);
        var travelAllowanceDetails = JSON.parse(
          JSON.stringify(res.data.travelAllowanceDetailDTOs)
        );
        if (travelAllowanceDetails != null && travelAllowanceDetails.length > 0) {
          travelAllowanceDetails.filter((x: travelallowanceDetailValue) => {
            x.checkInDate.indexOf("0001-01-01") > -1
              ? (x.checkInDate = "")
              : (x.checkInDate = this.$options.filters["formattingDate"](
              x.checkInDate
              ));
            x.checkOutDate.indexOf("0001-01-01") > -1
              ? (x.checkOutDate = "")
              : (x.checkOutDate = this.$options.filters["formattingDate"](
              x.checkOutDate
              ));
          });
          travelAllowanceDetails.forEach((x: travelallowanceDetailValue, index: number) => {
            x.territoryEdit = false;
            x.cityEdit = false;
            x.provinceEdit = false;
            x.checkInDateEdit = false;
            x.checkOutDateEdit = false;
            x.hotelNameEdit = false;
            x.checkInDateEdit = false;
            x.checkOutDateEdit = false;
            x.lineNo = index + 1;
            x.ticketsList = [];
            x.hotelList = [];
            x.attachmentList = [];
            x.territoryColor = "blue darken-3";
            x.territoryhinttext = "Please select the territory of this request"
            x.provinceerrorColor = "blue darken-3";
            x.provincehinttext = "Please select the Provinceh of this request"
            x.accomodationCityerrorColor = "blue darken-3";
            x.accomodationCitylhinttext = "Please select the Provinceh of this request"
            x.hotelerrorColor = "blue darken-3";
            x.hotelhinttext = "Please select the Provinceh of this request"
            x.checkInDateerrorColor = "blue darken-3";
            x.checkInDatelhinttext = "Please select the Provinceh of this request"
            x.checkOutDateerrorColor = "blue darken-3";
            x.checkOutDatelhinttext = "Please select the Provinceh of this request"
            x.ticketsList = x.uploadViewModels.filter(
              (z: any) => z.uploadType == "Tickets"
            );
            x.hotelList = x.uploadViewModels.filter(
              (z: any) => z.uploadType == "HotelReceipt"
            );
            if (x.territory == "Mainland China") x.readonlyProvince = true;
            else x.readonlyProvince = false;
          });
          this.desserts = travelAllowanceDetails;
        }
      }
      var territoryResult = await GetTerritoryList();
      if (territoryResult.data) {
        territoryResult.data.forEach((x: any) => {
          this.territoryList.push({Id: x.name, Name: x.nameCN});
        });
      }
    }

    CloseAttachmentType() {
    }

    deleteFileOnDb(item: any) {
      //删除操作
      DeleteUploadFileODB(item.uploadFileID)
        .then((res: any) => {
          if (res.data) this.$message.success("delete success");
        })
        .catch((err: any) => {
        });
    }

    postList(item: travelallowanceDetailValue[]) {
      item.forEach((c: travelallowanceDetailValue) => {

        c.checkInDate = c.checkInDate == "" ? "" : c.checkInDate.split("/").reverse().join("-")
        c.checkOutDate = c.checkOutDate == "" ? "" : c.checkInDate.split("/").reverse().join("-")

      })
      this.desserts = item;
      this.currentClickMode = item.filter(x => x.currentModel == true)[0]
    }

    SelectAttachmentType(item: any) {
      var submitItem = JSON.parse(JSON.stringify(item))
      item.attachmentList.forEach((x: any) => {
        x.UploadType = this.attachmentType;
      });
      if (this.attachmentType == "Tickets") {
        if (this.TicketsRemarks == "") {
          return this.$message.error("请填写Remarks");
        }
      }
      SaveUploadFile(item.attachmentList).then((res: any) => {
        item.attachmentList = [];
        if (this.attachmentType == "Tickets") {
          console.log(item.ticketsList)
          item.attachmentList.forEach((z: any) => item.ticketsList.push(z))
        }else{
          item.attachmentList.forEach((z: any) => item.hotelList.push(z))
        }
      });
      submitItem.remarks = this.TicketsRemarks;
      item.remarks = this.TicketsRemarks;
      submitItem.checkInDate = submitItem.checkInDate.split("/").reverse().join("-")
      submitItem.checkOutDate = submitItem.checkOutDate.split("/").reverse().join("-")

      PutTravelAllowanceDetail(submitItem).then((res: any) => {
        if (res.data) {
        }
      });
      this.UploadDialog = false;
    }

    Updoad() {
      if (this.attachmentType == "") {
        this.UploadDialog = true;
      }
    }

    inputFile() {
      this.$refs.uploadFile.dispatchEvent(new MouseEvent("click"));
    }

    file(item: any) {
      const file = this.$refs.uploadFile.files;
      const data = new FormData();
      data.append("id", this.$route.params.id);
      data.append("travelAllowanceDetailId", item.travelAllowanceDetailId);
      if (file.length > 0) {
        file.forEach((x: any) => {
          data.append("file", x);
        });
      }

      UploadFile(data).then((res: any) => {
        if (res.data) {
          item.attachmentList = res.data;
        }
      });
    }

    getDaysBetween(dateString1: string, dateString2: string) {
      var startDate = Date.parse(dateString1);
      var endDate = Date.parse(dateString2);
      var days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000);
      // alert(days);
      return days;
    }

    getCurrentCheckInDate() {

      return this.currentClickMode.checkInDate;
    }

    getCurrentCheckOutDate() {


      return this.currentClickMode.checkOutDate;
    }

    DeleteLine(item: travelallowanceDetailValue) {
      this.desserts.splice(this.desserts.indexOf(item), 1);
      this.desserts.forEach((x: travelallowanceDetailValue, i: number) => {
        x.lineNo = i + 1;
      });
      DeleteTravelAllowanceDetail(item).then((res: any) => {
        if (res.data) {
          this.$message.success("delete success");
        }
      });
    }

    changeEdit(item: any): void {
      setTimeout(() => {
        item.item.territoryEdit = false;
        item.item.cityEdit = false;
        item.item.provinceEdit = false;
        item.item.hotelNameEdit = false;
        item.item.checkInDateEdit = false;
        item.item.checkOutDateEdit = false;

        this.currentClickMode = item.item;
        switch (item.header.value) {
          case "territory":
            item.item.territoryEdit = true;
            break;
          case "accomodationCity":
            item.item.cityEdit = true;
            break;
          case "province":
            item.item.provinceEdit = true;
            break;
          case "hotelName":
            item.item.hotelNameEdit = true;
            break;
          case "checkInDate":
            item.item.checkInDateEdit = true;
            if (item.item.checkInDate != null)
              item.item.checkInDate = item.item.checkInDate
                .split("/")
                .reverse()
                .join("-");
            break;
          case "checkOutDate":
            item.item.checkOutDateEdit = true;
            if (item.item.checkOutDate != null)
              item.item.checkOutDate = item.item.checkOutDate
                .split("/")
                .reverse()
                .join("-");

            break;
        }
      }, 100);
    }

    isEmpty(obj: string): boolean {
      if (typeof obj == "undefined" || obj == null || obj == "") {
        return false;
      } else {
        return true;
      }
    }

    AddNewLine() {
      let newModel: travelallowanceDetailValue = {};
      this.headers.forEach((x) => {
        newModel[x["value"]] = null;
      });
      if (this.desserts.length == 0) newModel.lineNo = 1;
      else newModel.lineNo = this.desserts[this.desserts.length - 1].lineNo + 1;
      newModel.travelAllowanceId = this.$route.params.id;
      newModel.territoryEdit = false;
      newModel.cityEdit = false;
      newModel.provinceEdit = false;
      newModel.checkInDateEdit = false;
      newModel.checkOutDateEdit = false;
      newModel.hotelNameEdit = false;
      newModel.checkInDateEdit = false;
      newModel.checkOutDateEdit = false;
      newModel.ticketsList = [];
      newModel.hotelList = [];
      newModel.attachmentList = [];
      newModel.noOfNights = 0
      this.desserts.push(newModel);
      SaveTravelAllowanceDetail(newModel).then((res) => {
        if (res.data != "") newModel.travelAllowanceDetailId = res.data;
      });
    }

    getCurrentTable() {
      return this.desserts;
    }

    async away(flag: boolean = true) {
      let isSave: boolean = false;
      var model: string = ""
      // if (!flag) {
      //
      // } else {
      //   model = JSON.stringify(this.currentClickMode.item);
      //
      //   if (model != undefined) {
      //     this.submitMode = JSON.parse(model);
      //
      //
      //   }
      // }
      model = JSON.stringify(this.currentClickMode);
      this.submitMode = JSON.parse(model);
      if (this.submitMode.checkOutDate != null)
        this.submitMode.checkOutDate = this.submitMode.checkOutDate
          .split("/")
          .reverse()
          .join("-");
      if (this.submitMode.checkInDate != null)
        this.submitMode.checkInDate = this.submitMode.checkInDate
          .split("/")
          .reverse()
          .join("-");
      if (this.lastClickMode == null) {
        isSave = true;
        this.lastClickMode = JSON.parse(JSON.stringify(this.submitMode));
      }
      if (this.submitMode.territoryEdit) {
        if (this.lastClickMode.territory != this.submitMode.territory)
          isSave = true;
        this.currentClickMode.territoryEdit = false;
        if (this.currentClickMode.territory == "Mainland China") {
          this.currentClickMode.readonlyProvince = true;
        } else {
          this.currentClickMode.readonlyProvince = false;
        }
      }
      if (this.submitMode.cityEdit) {
        if (
          this.lastClickMode.accomodationCity !=
          this.submitMode.accomodationCity
        )
          isSave = true;
        this.currentClickMode.cityEdit = false;
      }
      if (this.submitMode.provinceEdit) {
        if (this.lastClickMode.province != this.submitMode.province)
          isSave = true;
        this.currentClickMode.provinceEdit = false;
      }
      if (this.submitMode.hotelNameEdit) {
        if (this.lastClickMode.hotelName != this.submitMode.hotelName)
          isSave = true;
        this.currentClickMode.hotelNameEdit = false;
      }
      if (this.submitMode.checkInDateEdit) {
        if (this.lastClickMode.checkInDate != this.submitMode.checkInDate)
          isSave = true;
        this.currentClickMode.checkInDateEdit = false;
        this.currentClickMode.checkInDate = this.currentClickMode.checkInDate
          .split("-")
          .reverse()
          .join("/");
      }
      if (this.submitMode.checkOutDateEdit) {
        if (this.lastClickMode.checkOutDate != this.submitMode.checkOutDate)
          isSave = true;
        this.currentClickMode.checkOutDateEdit = false;
        this.currentClickMode.checkOutDate = this.currentClickMode.checkOutDate
          .split("-")
          .reverse()
          .join("/");
      }
      if (
        this.isEmpty(this.currentClickMode.territory) &&
        this.isEmpty(this.currentClickMode.checkInDate) &&
        this.isEmpty(this.currentClickMode.checkOutDate) != ""
      ) {
        var days = this.getDaysBetween(
          this.submitMode.checkInDate,
          this.submitMode.checkOutDate
        );
        this.currentClickMode.noOfNights = parseInt(days);
        if (this.currentClickMode.noOfNights == 0)
          this.currentClickMode.noOfNights = 1;
        await GetCityDailyAllowanceByTerritory(
          this.currentClickMode.territory
        ).then((res) => {
          if (res.data) {
            this.submitMode.noOfNights = this.currentClickMode.noOfNights;
            this.currentClickMode.dailyAmount = res.data.amountRMB;
            this.submitMode.dailyAmount = res.data.amountRMB;
            this.currentClickMode.totalAmount =
              this.currentClickMode.noOfNights * res.data.amountRMB;
            this.submitMode.totalAmount =
              this.currentClickMode.noOfNights * res.data.amountRMB;
          }
        });
      }
      if (isSave && Object.keys(this.submitMode).length > 0) {
        console.log(this.submitMode)
        PutTravelAllowanceDetail(this.submitMode).then((res: any) =>
          console.log(res)
        );
        this.lastClickMode = JSON.parse(JSON.stringify(this.submitMode));
      }
    }

    checkOutDates = (val: any) =>
      this.getCurrentCheckInDate() == null
        ? true
        : Date.parse(val) >
        Date.parse(
          this.getCurrentCheckInDate().split("/").reverse().join("-")
        ) -
        8.64e7;
    checkInDates = (val: any) =>
      Date.parse(val) < Date.now() - 8.64e7;
  }
</script>
